<template>
  <el-dialog title="提示" :model-value="modelValue" @close="closed" width="22%">
    <div class="center">
      <p class="title">{{ $t("theme.themeColorChange") }}</p>
      <el-color-picker v-model="mColor" :predefine="predefineColors">
      </el-color-picker>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">{{ $t("universal.cancel") }}</el-button>
        <el-button type="primary" @click="comfirm">{{
          $t("universal.confirm")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { setTheme } from "@/utils/theme.js";
import { useStore } from "vuex";
defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
});
const store = useStore();
const mColor = ref(store.getters.mainColor);
// 预定义色值
const predefineColors = [
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#c7158577",
];

const emits = defineEmits(["update:modelValue"]);
const closed = () => {
  emits("update:modelValue", false);
};
const comfirm = () => {
  setTheme(mColor.value);
  store.commit("theme/setMainColor", mColor.value);
  closed();
};
</script>

<style lang="scss" scoped>
.center {
  text-align: center;

  .title {
    margin-bottom: 12px;
  }
}
</style>
